<template>
	<view class="show" v-if="list.length>0">
		<view v-for="(item, index) in list" :key="index">
		  <text style="flex: 1;white-space:normal; word-break:break-all;">{{ item.proId }}</text>
		  <view style="display: flex;">
			  <u-switch
			  v-model="item.sort"
			    activeColor="#FE3430"
			    size="48"
			    @change="setTop($event, item.proSku)"
			  ></u-switch
			  >
			  <text style="margin-right: 40rpx;">置顶</text>
			<u-switch
			  v-model="item.stt"
			  activeColor="#FE3430"
			  size="48"
			  @change="change($event, item.id)"
			></u-switch
			>
			{{ item.stt ? "显示" : "隐藏" }}
		  </view>
		</view>
	</view>
	<view v-else><u-divider  textSize="34" text="暂无数据"></u-divider></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
	  async setTop(e, id){
		  let sort = e?1:99
		  let data = await this.$api.productSetTopApi({data:{
			  proSku:id,
			  sort
		  }})
		  uni.showToast({
		    title: data.message,
		    icon: "none",
		  });
		  console.log(data);
		  
	  },
    change(e, id) {
      console.log(e, id);
      this.$api
        .productChangeSttApi({ id, stt: e ? "0" : "1" })
        .then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: "修改成功",
              icon: "none",
            });
          }
        });
    },
  },
  onShow() {
    this.$api
      .productListApi({ data: { pageNo: 1, pageSize: 999} })
      .then((res) => {
        if (res.code == 200) {
          this.list = res.result.list.map((item) => ({
            ...item,
            stt: item.stt == "0" ? true : false,
			sort: item.sort == "1" ? true : false,
          }));
		  console.log(this.list);
        }
      });
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #f1f1f1;
  height: 100vh;
}
.show {
  &>view:not(.u-switch) {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #bdbdbd;
    min-height: 80rpx;
    // line-height: 80rpx;
    display: flex;
    justify-content: space-between;
    padding: 0 10rpx 0 10rpx;
  }
}
</style>
